<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>批量生成奖状系统-主页</title>
    <link href="../static/css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/index.css">
</head>
<body>
    <!-- loading动画部分 -->
    <div id="loading"><img src="../static/images/loading.gif" alt="loading..."></div>
    
    
    <!-- 主要界面 -->
    <div class="container">
        <!-- 导航栏 -->
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">批量奖状生成系统 &nbsp; <span>|</span></a>
                </div>

                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html">系统主页</a></li>
                        <li><a href="index/about.html">关于我们</a></li>
                        <li><a href="index/update.html">系统详情</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">特别鸣谢 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">郭昊东</a></li>
                                <li><a href="#">单</a></li>
                                <li><a href="#">我自己</a></li>
                            </ul>
                        </li>
                    </ul>
                    
                    <ul class="nav navbar-nav navbar-right">
                        <li class="text-info "><a href="">Hello!<strong class="text-info">{{username}}</strong>, welcome to the index of system ~ ~<span class="sr-only">(current)</span></a></li>
                        <li class="active"><a href="#">默认主题<span class="sr-only">(current)</span></a></li>
                        <li><a href="/logout">退出登录<span class="sr-only">(current)</span></a></li>
                    </ul>
                </div>
            </div>
        </nav>    

        <!-- 中间容器 -->
        <form method="POST" enctype=multipart/form-data>
            <div class="input-container jumbotron">
                <h2 id="names">名单导入</h2><br>
                <p class="text-uppercase">
                    请选择需要导入的人员名单，因系统功能尚未强大，<span class="text-warning">格式须为csv或txt文件</span>（<a href="#tips">参考下方说明</a>），<span class="text-warning">且表格格式请<strong class="text-danger">严格参照</strong>说明（<a href="#tips">参考下方说明</a>）</span><br>
                    <a href="index/standard.html" class="alert-link" id="tips"><strong >导入名单表格规范说明</strong></a>
                </p>
                <br>
                <!-- accept:限制文件类型，当前设置为csv和txt文件 -->
                <input type=file accept=".csv, .txt" class="btn btn-default btn-lg" name=file required>
            </div>
    
            <div class="input-container jumbotron">
                <h2 id="models">模板选择</h2><br>
                <p class="text-uppercase">目前系统不支持用户自传奖状模板，请从一下奖状模板中挑选一种进行制作</p>
                <input type="radio" id="model_1" name="model" value="model_1.png" required>
                <label for="model_1"><img src="../static/images/index/model_1.png" alt="模板一"></label>
            </div>
            <div class="input-container jumbotron">
                <h2>提交面板</h2><br>
                <p class="text-uppercase">
                    <a href="#names">名单导入</a>和<a href="#models">模板选择</a>两个面板选择好之后，就可以填入您的QQ邮箱，再选择一下其中一个按钮。如果您想重新选择请点击<strong>清除重置</strong>，若选择完毕即可点击<strong>开始制作</strong>
                </p>
    
                <br>
                <label for="email">Enter your user：</label><input type="email" id="email" name="email"  class="form-control" placeholder="Enter your email" required>
                <br>
                
                <div class="text-left">
                    <button type="reset" class="btn btn-default btn-lg">清除重置</button>
                    &nbsp;&nbsp;
                    <button type=submit class="btn btn-primary btn-lg" name=Upload>开始制作</button>
                    <strong class="text-danger">{{msg}}</strong>
                </div>
            </div>
        </form>
        <footer>
            <p>&copy; 2020 | zm | 系统还有待完善，欢迎给出指导意见 | Email：zhuming-self@qq.com</p>
        </footer>
    </div>
    
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- 导航栏下拉动画 -->
    <script type="text/javascript">
        setTimeout(function() {//定时器
            $("#loading").css("display", "none");//将图片的display属性设置bai为none
        }, 6000);   //设置时间，这里为6000ms，即6秒
    </script>
        
        

</body>
</html>
